<template>
  <div class="orders-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <div class="header-title">
            <el-icon><Tickets /></el-icon>
            <span>历史订单</span>
          </div>
          <div class="header-actions">
            <el-button type="primary" @click="refreshData">
              <el-icon><Refresh /></el-icon>
              刷新数据
            </el-button>
          </div>
        </div>
      </template>

      <!-- 筛选条件 -->
      <div class="filter-container">
        <el-form :inline="true" :model="filters" class="filter-form">
          <el-form-item label="订单状态">
            <el-select v-model="filters.status" placeholder="订单状态" clearable>
              <el-option label="全部" value="" />
              <el-option label="已完成" value="completed" />
              <el-option label="已取消" value="cancelled" />
              <el-option label="已评价" value="rated" />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="filters.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchOrders">搜索</el-button>
            <el-button @click="resetFilters">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 订单列表 -->
      <div class="orders-list">
        <el-table
          :data="ordersList"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column type="expand">
            <template #default="props">
              <div class="expanded-content">
                <div class="expanded-item">
                  <div class="item-label">乘客评价：</div>
                  <div class="item-value">
                    <template v-if="props.row.rating">
                      <el-rate v-model="props.row.rating" disabled show-score text-color="#ff9900"></el-rate>
                      <p class="comment-text">{{ props.row.comment || '乘客未留下评价内容' }}</p>
                    </template>
                    <template v-else>
                      <span class="no-rating">乘客未评价</span>
                    </template>
                  </div>
                </div>
                <div class="expanded-item">
                  <div class="item-label">订单备注：</div>
                  <div class="item-value">{{ props.row.remark || '无' }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="订单号" width="120" />
          <el-table-column prop="passengerName" label="乘客" width="100" />
          <el-table-column prop="startLocation" label="出发地" width="160" />
          <el-table-column prop="endLocation" label="目的地" width="160" />
          <el-table-column prop="orderTime" label="下单时间" width="160" />
          <el-table-column prop="amount" label="金额" width="100">
            <template #default="scope">
              ¥{{ scope.row.amount.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template #default="scope">
              <el-tag v-if="scope.row.status === 'completed'" type="success">已完成</el-tag>
              <el-tag v-else-if="scope.row.status === 'cancelled'" type="info">已取消</el-tag>
              <el-tag v-else-if="scope.row.status === 'rated'" type="warning">已评价</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="scope">
              <el-button 
                size="small" 
                @click="showOrderDetail(scope.row)"
              >
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>

    <!-- 订单详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="订单详情"
      width="600px"
    >
      <div class="order-detail" v-if="currentOrder">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="订单号">{{ currentOrder.id }}</el-descriptions-item>
          <el-descriptions-item label="乘客">{{ currentOrder.passengerName }}</el-descriptions-item>
          <el-descriptions-item label="乘客电话">{{ currentOrder.passengerPhone }}</el-descriptions-item>
          <el-descriptions-item label="出发地">{{ currentOrder.startLocation }}</el-descriptions-item>
          <el-descriptions-item label="目的地">{{ currentOrder.endLocation }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ currentOrder.orderTime }}</el-descriptions-item>
          <el-descriptions-item label="预约时间">{{ currentOrder.appointmentTime || '无' }}</el-descriptions-item>
          <el-descriptions-item label="金额">¥{{ currentOrder.amount.toFixed(2) }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag v-if="currentOrder.status === 'completed'" type="success">已完成</el-tag>
            <el-tag v-else-if="currentOrder.status === 'cancelled'" type="info">已取消</el-tag>
            <el-tag v-else-if="currentOrder.status === 'rated'" type="warning">已评价</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="乘客评价" v-if="currentOrder.rating">
            <el-rate v-model="currentOrder.rating" disabled show-score text-color="#ff9900"></el-rate>
            <p class="comment-text">{{ currentOrder.comment || '乘客未留下评价内容' }}</p>
          </el-descriptions-item>
          <el-descriptions-item label="订单备注">{{ currentOrder.remark || '无' }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 加载状态
const loading = ref(false)

// 分页参数
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 筛选条件
const filters = reactive({
  status: '',
  dateRange: []
})

// 重置筛选条件
const resetFilters = () => {
  filters.status = ''
  filters.dateRange = []
  searchOrders()
}

// 搜索订单
const searchOrders = () => {
  loading.value = true
  // 模拟API请求
  setTimeout(() => {
    // 这里实际项目中应该调用API
    loading.value = false
    ElMessage.success('搜索完成')
  }, 500)
}

// 刷新数据
const refreshData = () => {
  ElMessage.success('数据已刷新')
  fetchOrdersList()
}

// 订单数据
const ordersList = ref([
  {
    id: 'O2023051001',
    passengerName: '李同学',
    passengerPhone: '13900001111',
    startLocation: '校园北门',
    endLocation: '火车站',
    orderTime: '2023-05-10 08:00',
    appointmentTime: '2023-05-10 08:30',
    amount: 25.5,
    status: 'completed',
    rating: 4.5,
    comment: '司机很准时，服务态度很好！',
    remark: '请提前5分钟到达'
  },
  {
    id: 'O2023051002',
    passengerName: '王同学',
    passengerPhone: '13900002222',
    startLocation: '图书馆',
    endLocation: '华联商场',
    orderTime: '2023-05-10 09:45',
    appointmentTime: null,
    amount: 18.0,
    status: 'rated',
    rating: 5,
    comment: '非常满意，车内很干净',
    remark: ''
  },
  {
    id: 'O2023051003',
    passengerName: '赵同学',
    passengerPhone: '13900003333',
    startLocation: '学生公寓',
    endLocation: '市中心',
    orderTime: '2023-05-10 14:20',
    appointmentTime: '2023-05-10 14:45',
    amount: 35.0,
    status: 'completed',
    rating: null,
    comment: null,
    remark: '有行李，需要后备箱'
  },
  {
    id: 'O2023051004',
    passengerName: '张同学',
    passengerPhone: '13900004444',
    startLocation: '体育馆',
    endLocation: '东城区',
    orderTime: '2023-05-10 16:00',
    appointmentTime: '2023-05-10 16:30',
    amount: 30.0,
    status: 'cancelled',
    rating: null,
    comment: null,
    remark: '乘客取消'
  }
])

// 计算总数
total.value = ordersList.value.length

// 获取订单列表数据
const fetchOrdersList = () => {
  loading.value = true
  // 模拟API请求
  setTimeout(() => {
    // 这里实际项目中应该调用API
    loading.value = false
  }, 500)
}

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchOrdersList()
}

// 处理当前页变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchOrdersList()
}

// 订单详情
const dialogVisible = ref(false)
const currentOrder = ref(null)

// 显示订单详情
const showOrderDetail = (order) => {
  currentOrder.value = order
  dialogVisible.value = true
}

// 组件挂载后执行
onMounted(() => {
  fetchOrdersList()
})
</script>

<style scoped>
.orders-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.header-title .el-icon {
  margin-right: 8px;
  font-size: 20px;
}

.filter-container {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
}

.orders-list {
  margin-top: 20px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.expanded-content {
  padding: 10px 20px;
}

.expanded-item {
  margin-bottom: 10px;
  display: flex;
}

.item-label {
  font-weight: bold;
  width: 100px;
  color: #606266;
}

.item-value {
  flex: 1;
}

.comment-text {
  margin-top: 5px;
  color: #606266;
}

.no-rating {
  color: #909399;
  font-style: italic;
}

.order-detail {
  max-height: 60vh;
  overflow-y: auto;
}
</style> 